<template>
  <div class="music-scroll-container">
    <div
      class="music-scroll-view"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
      :style="scrollStyle"
    >
      <div class="music-item" v-for="(item, index) in props.musicList" :key="index" @click="handlePlayMusic(item.id)">
        <div class="music-item_cover">
          <img :src="`${item.al.picUrl}?param=200y200`" alt="" />
        </div>
        <div class="music-item_info show-one-line">{{ item.name }}</div>
        <van-icon name="audio" class="icon"></van-icon>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ISearchSongItem } from "@/types/music/searchSongType";
import { preventDefault } from "@/utils/tools";
import { computed, reactive, type CSSProperties } from "vue";

const props = defineProps<{
  musicList: ISearchSongItem[];
}>();

const emit = defineEmits<{
  (e: "playCurrentMusic", id: number): void;
}>();
const moveState = reactive({
  startY: 0,
  moveY: 0,
  endY: 0,
  page: 0,
  isTouch: true,
});

const itemHeight = computed(() => Math.floor((document.documentElement.clientWidth / 100) * 34));

const scrollStyle = computed(
  () =>
    ({
      transform: `translateY(${moveState.moveY}px)`,
      transition: !moveState.isTouch ? "transform 0.3s ease-out" : "",
    } as CSSProperties)
);

const handlePlayMusic = (id: number) => {
  emit("playCurrentMusic", id);
};

const handleTouchStart = (e: TouchEvent) => {
  moveState.isTouch = true;
  moveState.startY = e.touches[0].clientY;
};

const handleTouchMove = (e: TouchEvent) => {
  const { clientY } = e.touches[0];
  moveState.moveY = moveState.page
    ? Math.floor(clientY - (itemHeight.value + moveState.startY))
    : Math.floor(clientY - moveState.startY);
  preventDefault(e);
};

const handleTouchEnd = (e: TouchEvent) => {
  moveState.isTouch = false;
  const moveDis = moveState.moveY;
  if (moveDis > 0) {
    moveState.moveY = 0;
    moveState.page = 0;
  } else if (moveDis < 0 && Math.abs(moveDis) < itemHeight.value / 2) {
    moveState.moveY = 0;
    moveState.page = 0;
  } else if (moveDis < 0 && moveDis < itemHeight.value * 2) {
    moveState.moveY = -itemHeight.value - 10;
    moveState.page = 1;
  }
};
</script>

<style scoped lang="scss">
.music-scroll-container {
  height: calc(26vw + 32px);
  overflow: hidden;
  .music-scroll-view {
    .music-item {
      position: relative;
      display: inline-block;
      width: 26vw;
      margin-left: 20px;
      margin-bottom: 10px;
      &_cover {
        width: 100%;
        height: 100%;
        border-radius: 12px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      &_info {
        color: #fff;
        margin-top: 10px;
        text-align: center;
      }
      .icon {
        position: absolute;
        left: 0;
        bottom: 22px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 20px;
        border-radius: 12px;
        background: #717171;
        color: #ccf2f4;
        font-size: 14px;
      }
    }
  }
}
</style>
